<template>
  <div style="height: 100%">
    <a-card>
      <template #title>
        <a-input-group style="margin-left: 0" compact>
          <a-input placeholder="WebSocket服务端地址" title="WebSocket服务端地址" style="width: 200px" :addon-before="connection.protocol" v-model:value="connection.host"></a-input>
          <a-input placeholder="WebSocket端口" title="WebSocket端口" style="width: 60px"  v-model:value="connection.port"></a-input>
          <a-input allowClear placeholder="WebSocket请求路径" title="WebSocket请求路径" style="width: 400px"  v-model:value="connection.url"></a-input>
          <a-button @click="connectDsp">
            <template #icon><ApiOutlined /></template>
            连接
          </a-button>
          <a-button @click="getItems">
            <template #icon><DownloadOutlined />></template>
            获取数据
          </a-button>
        </a-input-group>
        <popover-question-circle colorable>这是开发版本</popover-question-circle>
      </template>
    </a-card>
    <universal-proto-table :data="result" :ignore-cols="ignoreCols"/>
  </div>
</template>
<script>
import {ApiOutlined,DownloadOutlined} from '@ant-design/icons-vue';
import 'vue-json-pretty/lib/styles.css';
import PopoverQuestionCircle from '../../components/tip/PopoverQuestionCircle';
import { message } from 'ant-design-vue';
import UniversalProtoTable from '../../components/dsp/proto/UniversalProtoTable';

export default {
  name: 'WebSocketDataParse',
  components: {
    ApiOutlined,
    DownloadOutlined,
    PopoverQuestionCircle,
    UniversalProtoTable
  },
  data () {
    return {
      connection: {
        protocol: 'ws://',
        host: '127.0.0.1',
        url: '/base',
        port: 9527
      },
      message: 'get',
      result: undefined,
      ws: undefined,
      ignoreCols: [
          'id',
          'index',
          'protoId',
          'sid',
          'frFR',
          'gameVersion'
      ]
    }
  },
  methods: {
    getItems (msg = this.message) {
      this.ws.send(msg);
    },
    connectDsp () {
      console.log(`生成连接地址：${this.webSocketAddress}`);
      let webSocket = new WebSocket(this.webSocketAddress);
      webSocket.onopen = this.onOpen;
      webSocket.onmessage = this.onMessage;
      webSocket.onclose = this.onClose;
      webSocket.onerror = this.onError;
      this.ws = webSocket;
    },
    onOpen() {
      console.log('连接成功');
      message.success('连接成功');
    },
    onMessage(e) {
      console.log('拿到数据');
      console.log(e);
      this.result = JSON.parse(e.data).data;
      if (this.result[0].id === undefined) {
        for (let resultKey in this.result) {
          this.result[resultKey]['id'] = resultKey
        }
      }
      message.success('数据加载成功');
    },
    onClose(e) {
      console.log('关闭连接');
      console.log(e);
      message.info('连接关闭');
    },
    onError(e) {
      console.log('连接异常');
      console.log(e);
      message.error('连接异常');
    },
  },
  computed: {
    webSocketAddress () {
      const cn = this.connection;
      return `${cn.protocol}${cn.host}:${cn.port}${cn.url}`;
    }
  },
  setup() {
  },
};
</script>
<style scoped>
</style>
